<template>
  <div>
    <p>欢迎光临_vue开发的收银系统_水果店</p>
    <table>
      <tr>
        <td>苹果10￥/斤，折扣$&lt;8折&gt;</td>
      </tr>
      <tr>
        <td>请输入你要购买的斤数<input type="number" v-model.number="sum" /></td>
      </tr>
      <tr>
        <td><button @click="add(sum)">结账买单~</button></td>
      </tr>
      <tr>
        <td>总价:{{ zj }}￥元 折后:{{ zhe }}￥元 省了:{{ sheng }}￥元</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sum: 0,
      zj: 0,
      zhe: 0,
      sheng: 0,
    };
  },
  methods: {
    add(s) {
      this.zj = s * 10;
      this.zhe = this.zj * 0.8;
      this.sheng = this.zj - this.zhe;
    },
  },
};
</script>

<style scoped lang="less">
table {
  width: 500px;
  margin: 0 auto;
  border: 1px solid rgb(9, 5, 5);
}
td,
tr {
  border: 1px solid rgb(9, 5, 5);
  text-align: center;
}
p {
  margin: 0 auto;
  text-align: center;
}
input{
  overflow:hidden;
}
</style>
